<script setup>
import { useCollapseStore } from '@/stores/collapse.js'
import { showMsg } from '@/utils/showMsg';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import Bread from '@/components/Bread.vue'

const router = useRouter()
const collapseStore = useCollapseStore()
const handleCollapse = () => collapseStore.toggle()
const handleFullScreen = () => document.documentElement.requestFullscreen()
const handleToPersonalInfo = () => router.push('/personal-info')
const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
  showMsg('已退出登录', 'success')
}
</script>
<template>
  <div class="header">
    <div class="left">
      <el-icon><Menu @click="handleCollapse"/></el-icon>
      <Bread />
    </div>
    <div class="right">
      <el-icon><FullScreen @click="handleFullScreen"/></el-icon>
      <el-dropdown placement="bottom">
        <el-avatar src="src/assets/avatar.png"></el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleToPersonalInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 确保整个 header 里面的内容纵向居中 */
  height: 100%; /* 可以设置一个高度，比如 100% */
}

.left, .right {
  display: flex; /* 设置为 flex 布局 */
  align-items: center; /* 确保内容纵向居中 */
  justify-content: center; /* 可选，如果需要横向居中 */
  height: 100%; /* 设置高度，确保 flex 容器可以工作 */
}

.left{
  /* background-color: red; */
}
.right{
  /* background-color: rgba(18, 150, 18, 0.526); */
}
.el-icon{
  font-size: 25px;
  margin-right: 25px;
  cursor: pointer;
}
.el-avatar{
  width: 50px;
  height: 50px;
  cursor: pointer;
}
</style>